<template>
  <view class="about-container">
    <!-- 应用信息 -->
    <view class="app-info">
      <image class="app-logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="app-name">照片记忆</text>
      <text class="app-version">Version 1.0.0</text>
    </view>
    
    <!-- 功能介绍 -->
    <view class="feature-section">
      <view class="section-title">主要功能</view>
      <view class="feature-list">
        <view class="feature-item">
          <u-icon name="photo" size="48" color="#3a8838"></u-icon>
          <text class="feature-name">智能相册</text>
          <text class="feature-desc">自动整理分类，轻松管理照片</text>
        </view>
        <view class="feature-item">
          <u-icon name="heart" size="48" color="#3a8838"></u-icon>
          <text class="feature-name">照片回忆</text>
          <text class="feature-desc">定期生成精美回忆视频</text>
        </view>
        <view class="feature-item">
          <u-icon name="cloud-upload" size="48" color="#3a8838"></u-icon>
          <text class="feature-name">云端备份</text>
          <text class="feature-desc">安全存储，永不丢失</text>
        </view>
      </view>
    </view>
    
    <!-- 团队信息 -->
    <view class="team-section">
      <view class="section-title">关于我们</view>
      <view class="team-content">
        <text class="team-desc">我们致力于为用户提供最好的照片管理和分享体验。通过先进的AI技术，帮助用户更好地整理和回忆珍贵的照片时刻。</text>
      </view>
    </view>
    
    <!-- 联系方式 -->
    <view class="contact-section">
      <view class="section-title">联系我们</view>
      <view class="contact-list">
        <view class="contact-item" @click="copyText('support@example.com')">
          <text>官方邮箱：support@example.com</text>
          <text class="copy-text">复制</text>
        </view>
        <view class="contact-item" @click="copyText('photos.example.com')">
          <text>官方网站：photos.example.com</text>
          <text class="copy-text">复制</text>
        </view>
      </view>
    </view>
    
    <!-- 底部链接 -->
    <view class="bottom-links">
      <view class="link-item" @click="navigateTo('privacy')">
        <text>隐私政策</text>
        <u-icon name="arrow-right" color="#999" size="28"></u-icon>
      </view>
      <view class="link-item" @click="navigateTo('terms')">
        <text>用户协议</text>
        <u-icon name="arrow-right" color="#999" size="28"></u-icon>
      </view>
      <view class="link-item" @click="checkUpdate">
        <text>检查更新</text>
        <u-icon name="arrow-right" color="#999" size="28"></u-icon>
      </view>
    </view>
    
    <!-- 版权信息 -->
    <view class="copyright">
      <text>Copyright © 2024 照片记忆</text>
      <text>All Rights Reserved</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    copyText(text) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          });
        }
      });
    },
    navigateTo(page) {
      uni.navigateTo({
        url: `/pages/my/${page}`
      });
    },
    checkUpdate() {
      uni.showLoading({
        title: '检查更新中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '已是最新版本',
          icon: 'none'
        });
      }, 1500);
    }
  }
}
</script>

<style>
.about-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 30rpx;
}

/* 应用信息样式 */
.app-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50rpx 0;
  margin-bottom: 30rpx;
}

.app-logo {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 20rpx;
  border-radius: 30rpx;
}

.app-name {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.app-version {
  font-size: 24rpx;
  color: #999;
}

/* 功能介绍样式 */
.feature-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 30rpx;
}

.feature-list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 30rpx;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 200rpx;
}

.feature-name {
  font-size: 28rpx;
  color: #333;
  margin: 15rpx 0 10rpx;
}

.feature-desc {
  font-size: 24rpx;
  color: #999;
  line-height: 1.4;
}

/* 团队信息样式 */
.team-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.team-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

/* 联系方式样式 */
.contact-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
}

.contact-item text {
  font-size: 26rpx;
  color: #666;
}

.copy-text {
  color: #3a8838 !important;
  font-size: 24rpx !important;
}

/* 底部链接样式 */
.bottom-links {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.link-item:last-child {
  border-bottom: none;
}

.link-item text {
  font-size: 28rpx;
  color: #333;
}

/* 版权信息样式 */
.copyright {
  text-align: center;
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.copyright text {
  font-size: 24rpx;
  color: #999;
}
</style> 